<template>
	<a-page-header title="会员权益" :sub-title="subTitle" @back="() => $router.back()" style="padding: 10px 24px" />
	<div class="member_benefits">
		<div class="right-arrow"  v-if="benefitsList?.length && showArrow"  @click="rightScroll"><right-outlined /></div>
		<div class="left-arrow" v-if="benefitsList?.length && showArrow"  @click="leftScroll">
			<left-outlined />
		</div>
		<div class="benefits_con" id="benefitsCon" v-if="benefitsList?.length">
			<div class="benefits_item" v-for="(item, index) in benefitsList"
				:key="index">
				<div class="top_bar">
					<div class="benefits_name">{{ item.name }}</div>
					<div class="benefits_desc">{{ item.introduction }}</div>
				</div>
		
				<div class="pay_money">
					￥<span style="font-size: 36px; font-weight: bold">{{
						item.money
					}}</span>
				</div>
				<div @click="openShipModal(item)" class="status_btn"
					:style="getBgColor(item.can_pay,item.is_dicker )"
					:class="item.is_dicker?'':item.can_pay == 0 ? 'status_btn_disabled' : ''">
					{{ item.is_dicker? '立即咨询':item.is_open == 1 ? "续费" : "立即开通" }}
				</div>
		
				<div class="props_con" v-if="item.content?.length">
					<div class="props_item" v-for="(props_item, props_index) in item.content" :key="props_index">
						<span :class="props_index<3?'font-bold':''">{{ props_item }}</span>
					</div>
				</div>
		
				<div class="horizantal_line"></div>
		
				<div class="create_fun" v-if="item.info?.length">
					<div class="fun_name">创作功能</div>
					<div class="fun_item" v-for="(fun_item, fun_index) in item.info" :key="fun_index">
						<div class="left_label">{{ fun_item }}</div>
						<div class="right_icon">
							<cu-icon type="icon-icon-02" style="color: #ff5252; font-size: 14px" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="no_data" v-else>
			<a-empty>
				<template #description> 暂无数据 </template>
			</a-empty>
		</div>
		<memberShip :rechargeData="rechargeData" :visible="showMemberShip" @close="closeMemberShip" />

		<AddTeam :visible="addTeamVisible" @onClose="addTeamVisible = false" @success="addTeamSuccess"
			:business="isBusiness" />

		<a-modal :title="'选择' + (showMemberBusiness ? '企业' : '团队')" :width="500" :visible="showMemberVisible"
			@cancel="showMemberVisible = false" :footer="false" centered :zIndex="1002">
			<team-slider @addTeam="addTeam" :team="showMemberTeam" :business="showMemberBusiness" height="400px"
				@change="onTeamChange"></team-slider>
		</a-modal>
	<a-modal v-model:visible="qrVisible" :width="400" :footer="false">
      <div
        style="
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          color: #999999;
          padding: 40px 0px;
        "
      >
        <div style="width: 200px;height: 200px;margin-bottom: 20px;">
          <img style="width: 100%; height: 100%" :src="aiConfig?.service_qrcode" />
        </div>
        <div>微信扫码咨询客服</div>
      </div>
    </a-modal>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		nextTick,
		onMounted,
		onUnmounted
	} from "vue";
	import memberShip from "@/views/socialMedia/PersonalCenter/modules/memberShip.vue";
	import utils from "@/common/utils/utils";
	import request from "@/common/utils/request";
	import AddTeam from "@/components/AddTeam/index.vue";
	import store from "@/store";
	import {RightOutlined, LeftOutlined} from '@ant-design/icons-vue';
	import {useRoute} from "vue-router";
import { message } from "ant-design-vue";
import { tryOnMounted } from '@vueuse/core'
	export default defineComponent({
		name: "memberBenefits",
		components: {
			memberShip,
			AddTeam,
		
			RightOutlined,
			LeftOutlined
		},
		setup() {
			const state = reactive({
				showMemberShip: false,
				benefitsList: [],
				rechargeData: {},
				addTeamVisible: false,
				showMemberVisible: false,
				teamList: [],
				ercodeVisible: false,
				scrollLeftArrActive: false,
				isBusiness: 0,
				showMemberTeam: false,
				showMemberBusiness: false,
				subTitle: '',
				showArrow: false,
				loading: false,
			});
			const aiConfig = ref(null);
			const qrVisible = ref(false)
			const getBenefitsList = () => {
				request.get("/work_ai", "/user/shotstack/package/list",{sketch:1}).then((res) => {
					console.log(res);
					state.benefitsList =  res.result
					state.subTitle = res?.prompt;
					tryOnMounted(()=>{
						nextTick(()=>{
							const benefitsCon = document.getElementById('benefitsCon');
							if(benefitsCon){
								 benefitsCon.scrollLeft +=  benefitsCon.scrollWidth
							}
						})
					})
				});
			};

			getBenefitsList();

			const closeMemberShip = () => {
				state.showMemberShip = false;
				state.rechargeData = {};
				getBenefitsList();
				store.dispatch('GetClipRoleList');
			};

			const openShipModal = async (item) => {
				if(item.is_dicker){//如果是大客户版本
					return qrVisible.value = true
				}
				if (state.loading) {
					return;
				}
				state.loading = true
				if (item.can_pay == 0) return;
				const villageInfo = await store.dispatch("GetVillageInfo")
				if (!utils.getCurrentTeam()) {
					state.showMemberVisible = true;
					return;
				}
				setTimeout(() => {
					request
						.post("/work_ai", "/user/shotstack/order/tmpPayOrder", {
							from: "ai",
							package_id: item.id,
							team_id: utils.getCurrentTeam(),
							village_id: villageInfo ? villageInfo.id : 0,
						})
						.then((res) => {
							if (res?.pay_status === "success") {
								message.success("操作成功");
								state.loading = false;
								state.rechargeData = {};
								getBenefitsList();
								store.dispatch('GetClipRoleList');
								return;
							}
							state.showMemberShip = true;
							state.rechargeData["option"] = {};
							state.rechargeData["option"]["money"] = item.money ?
								item.money :
								"0";
							state.rechargeData["order_id"] = res.order_id;
							state.rechargeData["payUrl"] =
								item.payUrl + "&tmp_order_id=" + res.order_id;
							state.loading = false;
						}).catch(() => {
							state.loading = false;
						});
				}, 500);
			};

			const addTeamSuccess = () => {
				state.addTeamVisible = false;
			};

			const addTeam = (is_business) => {
				state.addTeamVisible = true;
				state.isBusiness = is_business;
			};

			const onTeamChange = async (team) => {
				state.showMemberVisible = false;
			};
			
			const rightScroll = () => {
				let dom = document.getElementById('benefitsCon')
				if(dom.scrollLeft >= dom.scrollWidth - dom.offsetWidth) return
				dom.scrollLeft +=  dom.scrollWidth
				
				console.log(dom.offsetWidth, dom.scrollWidth, dom.scrollLeft)
			};
			
			const leftScroll = () => {
				let dom = document.getElementById('benefitsCon')
				if(dom.scrollLeft == 0) return
				dom.scrollLeft -= dom.scrollWidth
			};
			
			const showArr = () => {
				let timeout = setTimeout(()=> {
					let dom = document.getElementById('benefitsCon')
					console.log(dom, dom?.scrollWidth, dom?.offsetWidth)
					if(dom?.scrollWidth - dom?.offsetWidth > 0){
						state.showArrow = true
					} else {
						state.showArrow = false
					}
					clearTimeout(timeout)
				}, 500)
			}
			
			showArr()
			
			onMounted(()=>{
				window.addEventListener('resize', showArr, true)
			})
			
			onUnmounted(()=>{
				window.removeEventListener('resize', showArr);
			})
			const route = useRoute()
			const getBgColor = (can_pay,is_dicker)=>{
				let normalBgColor = {
					background:`linear-gradient(90deg, #ff574a, #fdb63b)`	
				}
				let disabledBgColor = {
					background:`linear-gradient(90deg, #ff574a, #fdb63b)`	
				}
				if(route.path.includes('socialMedia')){
					normalBgColor.background = `linear-gradient(90deg, #77aefa, #5477ff)`
					disabledBgColor.background = `linear-gradient(90deg, #77aefa, #5477ff)`
				}
				return is_dicker?'':can_pay ? normalBgColor : disabledBgColor
			}
			const getConfig = async ()=>{
				const aiConfigInfo = await store.dispatch("getAiConfig");
				aiConfig.value = aiConfigInfo
			}
 			 getConfig()
			return {
				...toRefs(state),
				closeMemberShip,
				openShipModal,
				addTeamSuccess,
				addTeam,
				rightScroll,
				leftScroll,
				showArr,
				getBgColor,
				aiConfig,
				qrVisible,
			};
		},
	});
</script>

<style lang="less" scoped>
	.member_benefits {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		.right-arrow {
			position: absolute;
			top: 50%;
			right: 15px;
			z-index: 11;
			transform: translateY(-84%);
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: #ffffff;
			color: var(--ss-primary-color);
			font-size: 20px;
			box-shadow: 0 0 18px var(--ss-primary-2);
			border-radius: 50%;
			cursor: pointer;
			opacity: 0;
			transition: 0.3s ease;
		}
		
		.left-arrow {
			position: absolute;
			top: 50%;
			left: 15px;
			z-index: 11;
			transform: translateY(-84%);
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: #ffffff;
			color: var(--ss-primary-color);
			font-size: 20px;
			box-shadow: 0 0 18px var(--ss-primary-2);
			border-radius: 50%;
			cursor: pointer;
			opacity: 0;
			transition: 0.3s ease;
		}
		
		&:hover {
			.right-arrow {
				opacity: 1;
			}
		
			.left-arrow {
				opacity: 1;
			}
		}
		.no_data {
			width: 100%;
			height: calc(100vh - 200px);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.benefits_con {
			display: flex;
			width: 90%;
			overflow: scroll;
			flex-shrink: 0;
			
			&::-webkit-scrollbar {
				width: 0;
				height: 0;
			}

			.benefits_item {
				min-width: 287px;
				padding-bottom: 20px;
				margin: 20px;
				background: #ffffff;
				box-shadow: 0px 0px 27px 0px rgba(134, 138, 139, 0.14);
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top_bar {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 96px;
					background: #f8fbff;
					border-radius: 10px 10px 0px 0px;

					.benefits_name {
						font-size: 22px;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}

					.benefits_desc {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 800;
						color: #fe7b42;
						margin-top: 5px;
					}
				}

				.pay_money {
					margin-top: 10px;
					font-size: 22px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ff3400;
				}

				.status_btn_disabled {
					margin-top: 10px;
					width: 189px;
					height: 44px;
					background: linear-gradient(90deg, #ff574a, #fdb63b);
					opacity: 0.43;
					border-radius: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-family: Source Han Sans CN;
					font-weight: 800;
					color: #ffffff;
					cursor: pointer;
				}

				.status_btn {
					margin-top: 10px;
					width: 189px;
					height: 44px;
					background: linear-gradient(90deg, #ff574a, #fdb63b);
					border-radius: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-family: Source Han Sans CN;
					font-weight: 800;
					color: #ffffff;
					cursor: pointer;
				}

				.props_con {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 50px;

					.props_item {
						font-size: 14px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-top: 10px;
					}
				}

				.horizantal_line {
					width: calc(100% - 40px);
					height: 2px;
					background: #eeeeee;
					margin: 30px 0;
				}

				.create_fun {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 50px;

					.fun_name {
						font-size: 16px;
						font-family: PingFang SC;
						font-weight: 600;
						color: #000000;
					}

					.fun_item {
						width: 100%;
						margin-top: 10px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left_label {
							font-size: 14px;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}

						.right_icon {}
					}
				}
			}
		}
	}
</style>